<template>
  <ScaleBox :width="1920"
            :height="1080"
            bgc="transparent"
            :delay="100">
    <div class="w-full h-full font-sans">
      <div class="w-full h-3/6 rounded-lg py-4 mt-2 shadow" style="background-color: #fff">
        <div class="title flex font-black text-xl pt-1 " style="height: 6%;color: #2f6aec">

         <span class="block w-full h-full ">
           <i class="iconfont icon-calendar text-xl"/>
           {{ currentYear }} {{ $t('mes.realTimeData') }}</span>
          <!--          <el-button icon="Search" class="buttons"  type="primary">查询</el-button>-->
          <el-button class="summary-btn mb-4" @click="jupToNewpage">
              <el-icon class="icon-left"><Histogram/></el-icon>
              <span>{{ $t('common.huizong') }}</span>
              <el-icon class="icon-position"><ArrowRight/></el-icon>
          </el-button>

        </div>
        <b class="line"></b>
        <div class="w-full" style="height: 30%">
          <cardBox/>
        </div>
        <div class="w-full px-5 py-2" style="height: 62%">
          <raw-material/>
        </div>
      </div>
      <div class="w-full h-3/6  py-4 rounded-lg shadow">
        <transfer-history-list/>
      </div>


    </div>
  </ScaleBox>
</template>

<script setup>
import '@/style/tailwind.css'
import '@/assets/font/iconfont.css'
import '@/style/app.scss'
import ScaleBox from 'vue3-scale-box'
import cardBox from './components/cardBox.vue'
import rawMaterial from './components/rawMaterial.vue'
import transferHistoryList from './components/transferHistoryList.vue'
import {onMounted, ref} from 'vue'
import router from '@/router'
import {ArrowRight, Histogram} from "@element-plus/icons-vue";

const currentYear = ref('');

const getTime = () => {
  const myDate = new Date();
  const myYear = myDate.getFullYear();
  const myMonth = myDate.getMonth() + 1;
  const myToday = myDate.getDate();

  const fillZero = (str) => (str < 10 ? `0${str}` : str);
  currentYear.value = `${myYear}-${fillZero(myMonth)}-${fillZero(myToday)}`
};

onMounted(() => {
  getTime();
});
const jupToNewpage = () => {
  // 路由跳转
  router.push('/allocationInforView');

}
</script>

<style scoped lang="scss">
.title {
  padding: 2px 18px 0;
}

.line {
  display: inline-block;
  width: 98%;
  height: 1px;
  background-color: #dbdbdb;
  margin: 0 16px;
  //margin-bottom: 20px;
}

.summary-btn {
  background: linear-gradient(to right, #2f6aec, #1e88e5);
  border: none;
  color: white;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(47, 106, 236, 0.2);

  .icon-left {
    font-size: 16px;
  }

  .icon-position {
    font-size: 16px;
    transition: transform 0.3s ease;
  }

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(47, 106, 236, 0.3);
    background: linear-gradient(to right, #3d7af0, #2196f3);

    .icon-position {
      transform: translateX(4px);
    }
  }
}
</style>
